
// 搜索UI组件事件类封装 强依赖index.html & index.css 偷懒未做整合。
class seeyonSearch {

    constructor (options) {
        this.callback = options && options.callback || function (){};
        this.clearCallback = options && options.clearCallback || function () {};
        this.init();
    }

    init (){
        this.content = document.querySelector(".dol-content");
        this.input = this.content.querySelector(".dol-input");
        this.submit = this.content.querySelector(".dol-submit");
        this.historyContent = this.content.querySelector(".dol-search-history");
        this.historyList = this.content.querySelector(".dol-historyList");
        this.clearHistory = this.content.querySelector(".dol-clearHistory");
        this.input.focus();
        this.initEvent();
    }
    initEvent (){
        let _this = this;
        //点击搜索框
        this.input.addEventListener("click",function(){
            _this.historyContent.classList.remove("dol-hidden");
        },false);
        //搜索框输入时
        // this.input.addEventListener("input",function(){
        //     _this.historyContent.classList.remove("dol-hidden");
        // },false);
        //搜索框失去焦点
        // this.input.addEventListener("blur",function(){
            // if(!_this.historyContent.classList.contains("dol-hidden")){
            //     _this.historyContent.classList.add("dol-hidden");
            // }
        // },false);
        //监听回车键执行搜索
        this.input.addEventListener("keyup",function(event){
            if(event.keyCode == "13" || event.code == "Enter"){
                _this.callback && _this.callback(_this.input.value);
            }
        },false);
        //点击搜索按钮执行搜索
        this.submit.addEventListener("click",function(){
            if(!_this.historyContent.classList.contains("dol-hidden")){
                _this.historyContent.classList.add("dol-hidden");
            }
            _this.callback && _this.callback(_this.input.value);
        },false);
        //点击清空历史记录
        this.clearHistory.addEventListener("click",function(){
            _this.historyList.innerHTML = "";
            _this.clearCallback && _this.clearCallback();
        },false);
        this.refreshHistoryClick();
    }
    initHistory(data){
        let li = '';
        if(!data)return;
        data.fotEach( (item,index) => {
            li += `<li>${ item.text }</li>`;
        });
        this.historyList.innerHTML = li;
        this.refreshHistoryClick();
    }
    refreshHistoryClick (){
        let _this = this;
        let li = this.historyList.querySelectorAll("li");
        for(var i=0,len=li.length;i<len;i++){
            var item = li[i];
            item.addEventListener("click",function(){
                _this.input.value = this.innerText;
                if(!_this.historyContent.classList.contains("dol-hidden")){
                    _this.historyContent.classList.add("dol-hidden");
                }
                setTimeout(function(){
                    _this.callback && _this.callback(_this.input.value);
                },200);
            },false);
        }
    }

}
// export default seeyonSearch;

